<!-- 第9章/HomeSharing/app/views/house/by_id.html -->
{% extends "layout.html" %}
{% block body %}
<div style="margin-top:1rem;">
    {% if house %}
    <h1 style="font-size:14pt;font-weight:bold;">
        {{ house['res_title'] }}
    </h1>
    <div>
        <span style="font-weight:bold;">发布者：</span>{{ owner['user_name'] }}
        <span style="font-weight:bold;">手机号：</span>{{ owner['user_phone'] }}
        <span style="font-weight:bold;">发布时间：</span>{{ house['pub_time'] }}
    </div>
    <div style="margin-top:1rem;">
        {{ house['res_content'] }}
    </div>
    <script src="/static_files/libs/ckeditor5-build-classic/ckeditor.js"></script>
    <div style="position:relative">
        <form method="post" enctype="multipart/form-data">
            <textarea name="comment"></textarea>
            <input type="submit" class="btn btn-success" value="发表评论" style="margin-top:0.5rem">
        </form>
        {% if 'current_user' not in session or not session['current_user'] %}
        <div class="editor-overlay">
            <a href="/user/login" class="btn btn-success" style="margin-top:1rem;">
                登录后发表评论
            </a>
        </div>
        {% endif %}
    </div>
    <div style="margin-top:0.5rem">
        {{ comments_grid }}
    </div>
    <script>
        ClassicEditor.create(
            document.querySelector('textarea[name="comment"]'),
            {
                toolbar:[
                    'heading', '|',
                    'bold', 'italic', 'indent', 'outdent',
                    'numberedList', 'bulletedList',
                    'blockQuote', '|',
                    'undo', 'redo'
                ]
            }
        );

    </script>
    <style>
        .editor-overlay{
            position:absolute;
            width:100%;height:100%;
            left:0;top:0;
            background-color:rgba(255,255,255,0.7);
            text-align:center;
        }

    </style>
    {% else %}
    <div>该房源不存在</div>
    {% endif %}
</div>
{% endblock %}